<template>
  <div>
    <!-- 头部组件 -->
    <NavBar leftText="返回"></NavBar>
    <van-panel :title="goodsDes.title">
      <div v-html="goodsDes.content"></div>
    </van-panel>
    <!-- 底部tab栏  -->
    <TabBar></TabBar>
  </div>
</template>

<script>
import NavBar from "../components/navBar";
import TabBar from "../components/Tabbar";
export default {
  components: {
    NavBar,
    TabBar
  },
  data() {
    return {
      // 图文数据
      goodsDes: {}
    };
  },
  created() {
    this.getGoodsDes();
  },
  methods: {
    // 获取图文数据
    async getGoodsDes() {
      const { data: res } = await this.$http.get(
        `/api/goods/getdesc/${this.getId}`
      );
      if (res.status !== 0) {
        //如果状态码不为0，表示出错了
        this.$toast("获取图文数据失败，请联系管理员");
      }
      this.goodsDes = res.message[0];
    }
  },
  computed: {
    getId() {
      // 获取id
      const id = this.$route.params.id;
      return id;
    }
  }
};
</script>

<style lang="less" scoped>
.van-panel__header {
  padding: 0 !important;
}
.van-cell__title {
  text-align: center;
  font-size: 16px;
  padding: 10px 0;
  color: #226aff;
  font-weight: 600;
  border-bottom: 1px solid #ccc !important;
}
</style>